<meta charset="UTF-8">
<div id="acc-details">
    <Row style="margin:10px;height: 35px;">
        <div style="float: left;">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker 
                type="daterange" 
                :value="dateVal"
                :editable="false"
                :clearable="false"
                @on-change="onChange" 
                show-week-numbers 
                style="width:300px"
                placement="bottom-start"></date-picker>
        </div>
        <div style="float: left;height: 35px; line-height: 35px;margin-left: 20px;" class="spans-wrap">
            <span class="cursor-pointer" @click="handleSelectdDate(0)">{{$t("reportForm.toDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(1)">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(3)">{{$t("reportForm.threeDays")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(7)">{{$t("reportForm.sevenDays")}}</span>
        </div>    
    </Row>
    <Row style="margin:10px;height: 35px;">
        <div style="float: left;">
            <div style="height: 35px; line-height: 35px;">{{$t("reportForm.selectDev")}}:&nbsp;</div> 
        </div>
        <div style="float: left;position: relative;width: 300px;">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue"  icon="ios-search-outline" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder"></i-input>
                <transition name="fade">
                    <ul class="search-item-wrapper" v-show="isShowMatchDev">
                        <li  class="demo-auto-complete-item" v-for="item in filterData">
                            <div class="demo-auto-complete-group" v-show="item.devices.length">
                                <span>{{ item.groupname }}</span>
                            </div>
                            <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.title }}</span>
                            </div>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div style="margin-left:20px;float: left;">
            <i-button @click="onClickQuery" >{{$t("reportForm.query")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table :columns="columns" :height="lastTableHeight" :data="tableData" :loading="loading"></i-table>
    </div>
    <div style="line-height: 45px;height: 45px;padding-left: 10px;">
        {{$t("reportForm.accOnTime")}} : {{accOnTimeStr}} ,   {{$t("reportForm.accOffTime")}} : {{accOffTimeStr}} 
    </div>
</div>